import React from "react"
import {Form, Button, Input } from "antd"

const FormItem = Form.Item
const ruleUserName = {required: true, message: "用户名不能为空"}
const rulePassword = {required: true, message: "密码不能为空"}
export default function AntdFormPage(props) {
  const {useEffect } = React
  const [form] = Form.useForm()
  const onFinish = val => {
    console.log(val)
  }
  const onFinishFailed = val => {
    console.log(val)
  }
  useEffect(() => {
    form.setFieldsValue({ username: "default" })
     /* 监听 url 变化  */
  const listen = function () {
    //路由切换
    window.addEventListener('hashchange', function(event) {
      console.log(123);
  
    }, false)
    }
    return () => {
      if (listen) {
        listen()
      }
    }
  },[])
  return (
    <div>
      <h3>AntdFormPage</h3>
      <Form form={form }  onFinish={onFinish} onFinishFailed={onFinishFailed }>
        <FormItem name="username" label="姓名" rules={ [ruleUserName] }>
          <Input placeholder="username placeholder" />
        </FormItem>
        <FormItem name="password" label="密码" rules={ [rulePassword]}>
          <Input placeholder="password placeholder" />
        </FormItem>
        <FormItem>
          <Button type="primary" size="large" htmlType="submit">
            submit
          </Button>
        </FormItem>
      </Form>
    </div>
  )
}